<template>
    <div class="hs-login">
        <div class="hs-login-lay">

            <div class="hs-login-logo">
<!--                <img src="/image/hs-login-logo.png">-->
            </div>

            <div class="hs-login-box">
                <div class="hs-login-form">
                    <div class="hs-login-row">
                        <div class="hs-login-label">用户名：</div>
                        <div class="hs-login-value">
                            <Input type="text" v-model.tirm="formInline.username" @keyup.enter.native="handleSubmit" placeholder="请输入登录账号"></Input>
                        </div>
                    </div>
                    <div class="hs-login-row">
                        <div class="hs-login-label">密码：</div>
                        <div class="hs-login-value">
                            <Input type="password" v-model.tirm="formInline.password" @keyup.enter.native="handleSubmit" placeholder="请输入密码"></Input>
                        </div>
                    </div>
                    <div class="hs-login-row">
                        <template v-if="isPc">
                            <hs-verification-pc @change="verificationChange"></hs-verification-pc>
                        </template>
                        <template v-else>
                            <hs-verification-app @change="verificationChange"></hs-verification-app>
                        </template>
                    </div>
                </div>
                <Button type="primary" size="large" :style="{width:'100%'}" @click="handleSubmit" :loading="btnLoading">登录</Button>
            </div>

        </div>
    </div>
</template>

<script>
    import hsVerificationPc from '@/components/hs-verification-pc';
    import hsVerificationApp from '@/components/hs-verification-app';
    export default {
        name: "login",
        data() {
            return {
                btnLoading: false,
                formInline: {
                    username: '',
                    password: '',
                    verification: false
                },
                isPc: true
            }
        },
        mounted(){
            // 判断是手机端还是PC端
            this.judge();
        },
        methods: {
            // 验证登录信息
            handleSubmit() {
                // 判断用户名
                if(!this.formInline.username){
                    this.$Message.error('请输入用户名');
                    return false;
                }else if(!/^[0-9a-zA-Z]+$/.test(this.formInline.username)){
                    this.$Message.error('用户名格式不正确');
                    return false;
                }else if(!this.formInline.password){
                    this.$Message.error('请输入密码');
                    return false;
                }else if(!this.formInline.verification){
                    this.$Message.error('请滑动验证码');
                    return false;
                }else{
                    // 登录
                    this.loginCheck();
                }
            },
            // 登录后台
            loginCheck(){
                this.btnLoading = true;
                this.axios.post('/adminLogin/loginCheck', this.formInline).then(res => {
                    console.log(res);
                    this.btnLoading = false;
                    if(res.status == 200){
                        // 保存登录凭证到sessionStorage
                        sessionStorage.setItem('J-TOKEN',JSON.stringify(res.data));
                        // 跳转统计页面
                        this.$router.push({
                            path:'/index/mall-goods'
                        })
                    }
                    if(res.status == 201){
                        this.$Message.error(res.msg);
                    }
                })
            },
            // 判断是手机端还是PC端打开
            judge(){
                if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                    this.isPc = false;
                } else {
                    this.isPc = true;
                }
                window.addEventListener('resize',()=>{
                    console.log('窗口变化了')
                    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
                        this.isPc = false;
                    } else {
                        this.isPc = true;
                    }
                })
            },
            // 滑动验证
            verificationChange(e){
                console.log(e)
                this.formInline.verification = e;
            }
        },
        components:{
            hsVerificationPc,
            hsVerificationApp
        }
    }
</script>

<style scoped lang="less">
    .hs-login {
        position: fixed;
        top: 0;
        width: 100%;
        min-height: 100%;
        display: flex;
        padding-top: 16vh;
        justify-content: center;
        background: url("../assets/login_bg.png") no-repeat  center top;
        background-size: 100% 100%;

        .hs-login-lay{
            .hs-login-logo{
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 0 20px;
                margin-bottom: 20px;
                img{
                    width: 164px;
                    height: 100%;
                }
            }
            .hs-login-box{
                width: 350px;
                padding: 30px 25px;
                background-color: #ffffff;
                box-shadow: 1px 3px 9px -4px #888888;
                .hs-login-form{
                    .hs-login-row{
                        margin-bottom: 20px;
                        .hs-login-label{
                            color: #515a6e;
                            font-size: 14px;
                        }
                        .hs-login-value{
                            input{
                                width: 100%;
                                height: 35px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>